<template>
  <div>
    <el-row>
      <el-col v-for="room in rooms" :key="room.id" :xs="24" :sm="12" :md="8" :lg="6">
        <el-card class="room-card" @click="goToDetails(room.id)">
          <div class="room-name">{{ room.name }}</div>
          <div class="room-price">{{ room.price }}元</div>
          <div class="room-views">{{ room.views }}次浏览</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rooms: [
        { id: 1, name: '豪华大床房', price: 555, views: 48 },
        { id: 2, name: '海景房22', price: 111, views: 39 },
        { id: 3, name: '经典商务房', price: 129, views: 18 },
        { id: 4, name: '行政人员标准房', price: 99, views: 9 },
      ],
    };
  },
  methods: {
    goToDetails(id) {
      // 这里可以实现跳转到详情页面的逻辑，例如使用路由跳转
      console.log(`点击了 id 为 ${id} 的房间，跳转到详情页面`);
    },
  },
};
</script>

<style scoped>
.room-card {
  padding: 15px;
  text-align: center;
}
.room-name {
  font-size: 16px;
  font-weight: bold;
}
.room-price {
  color: #ff5722;
}
.room-views {
  color: #999;
}
</style>
